<!--
SELECT下拉选择框,
props: 
placeholder 当没有内容的时候的提示语
menus 下拉数据,格式[{
    data: 下拉的值,必填
    selected: true/false 可选，默认false
}]
emit:
selected（index） 选中的索引
-->
<template>
  <div class="container">
    <!-- 正常显示的内容 -->
    <div class="select-container" @click="show=!show">
      <p v-show="!selected">{{placeholder}}</p>
      <p v-show="selected">{{selected_value}}</p>
      <i class="fas fa-sort-down"></i>
    </div>
    <transition name="fade" @afterEnter="afterEnter" @leave="leave">
      <div class="content-container" v-show="show">
        <div class="all-show-container">
          <div class="item" v-for="(menu,index) in menus" v-html="menu.data" @click="select(index)">
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<style lang="less" scoped>
  @import url('./theme.less');
  @import url('../../style/mixin.less');
  .container {
    width: 100%;
    p {
      margin: 0;
    }
    .container {
      font-size: 0;
      .select-container {
        background: @background;
        border: 1px solid @border-color;
        width: 100%;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        height: @height;
        p {
          padding: 0;
          margin: 0;
          line-height: @height;
          text-align: left;
          padding-left: 10px;
          color: @placeholder;
          font-size: 15px;
        }
        i {
          position: absolute;
          right: 10px;
          top: 0;
          font-size: 10px;
          line-height: @height;
          color: @placeholder;
        }
      }
    }
    .content-container {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      transition: all .1s;
      position: relative;
      z-index: 2;
      border: 1px solid @border-color;
      background: @background;
      height: 0;
      .all-show-container {
        .item {
          height: @height;
          width: 100%;
          font-size: 14px;
          .border-1px(@border-color);
          text-align: left;
          padding-left: 10px;
          line-height: @height;
          color: @color;
        }
      }

    }
  }

</style>
<script>
  export default {
      props:{
          placeholder:{
              default: '请选择下拉的内容'
          },
          menus:{
              required: true
          }
      },
    data() {
      return {
        show: false, //是否点击显示下拉
        selected:false, //是否有选中的内容
        selected_value: '', //选中的内容
      }
    },
    methods: {
      afterEnter(el) {
        var h = el.querySelector('.all-show-container').offsetHeight;
        el.style.height = h + 'px';
      },
      leave(el) {
        el.style.height = '0px';
      },
      /**
       * @description 选中的时候触发
       * @param {int} index - 选中的第几个元素
       */
      select(index){
          this.selected=true;
          this.selected_value=this.menus[index].data;
          this.show=false;
          this.$emit('selected',index);
      }
    },
    mounted:function(){
        for(let i in this.menus)
        {
            if(this.menus[i].selected)
            {
                this.selected=true;
                this.selected_value=this.menus[i].data;
            }
        }
    }
  }

</script>
